﻿<template>

  <el-main>
    <el-breadcrumb separator-class="el-icon-arrow-right">

      <el-breadcrumb-item :to="{ path: '/' }">{{currentModel.name}}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/' }">模型参数</el-breadcrumb-item>

    </el-breadcrumb>
    <el-dialog title="参数信息" :visible.sync="paramDlgVisible" :close-on-click-modal="false">
      <el-form :model="editParam">
        <el-form-item label="参数名称" :label-width="formLabelWidth">
          <el-input v-model="editParam.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="默认值" :label-width="formLabelWidth">
          <el-input v-model="editParam.value" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number v-model="editParam.order"  :min="1" label="请输入排序"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="paramDlgVisible = false">取 消</el-button>
        <el-button type="primary" @click="createParam">创 建</el-button>
      </div>
    </el-dialog>


<!--    <h1>录入分类管理</h1>-->
    <el-table :data="paramList" border highlight-current-row style="margin-top: 20px;" empty-text="暂无数据"
              v-loading="isLoading" :key="currentModel.id+'_paramList'">
      <el-table-column type="index" label="序号" show-overflow-tooltip width="50" align="center">
      </el-table-column>
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column prop="value" label="默认值">
      </el-table-column>
      <el-table-column prop="order" label="排序">
      </el-table-column>
      <el-table-column prop="createDate" label="创建日期">
      </el-table-column>
      <el-table-column
        align="right">
        <template slot="header">
          <el-button
            v-if="modelEditable"
            type="primary"
            @click="paramDlgVisible = true">添加
          </el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini">编辑
          </el-button>

          <el-button
            v-if="modelEditable"
            size="mini"
            type="danger"
            @click="deleteParam(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main>

</template>

<script>
export default {
    name: "ParamModule",
    data(){
      return {
          currentModel:{state:0},
          isLoading: false,
          formLabelWidth: '120px',
          paramList:[],
          editParam:{},
          paramDlgVisible:false,
          unitTypeList: [],
          unitTypeMap: {},
          dataTypeList:[],
          dataTypeMap:[],
          modelEditable:false,
      }
    },

    created: function () {
        const modelId = this.$route.query.id;
        this.loadParamList(modelId);
        this.loadModelInfo(modelId);
        this.loadDataType();
        this.loadUnitType();
    },
    methods: {
        dataTypeShowFormatter: function (row, column, cellValue, index) {
            return this.dataTypeMap[cellValue];
        },
        unitTypeShowFormatter: function (row, column, cellValue, index) {
            return this.unitTypeMap[cellValue];
        },
        loadUnitType: function () {
            this.$get("/meta/type/unit-type",{},(response) => {
                this.unitTypeList = response.data;
                var map = {};
                for (var i = 0; i < this.unitTypeList.length; i++) {
                    map[this.unitTypeList[i].id] = this.unitTypeList[i].name;
                }
                this.unitTypeMap = map;
            });
        },
        loadModelInfo: function (modelId) {
            this.$get("/model/" + modelId,{},(response) => {
                this.currentModel = response.data;
                this.modelEditable = this.currentModel.state != 'publish';
            });
        },

        loadDataType: function () {
            this.$get("/meta/type/data-type",{},(response) => {
                this.dataTypeList = response.data;
                var map = {};
                for (var i = 0; i < this.dataTypeList.length; i++) {
                    map[this.dataTypeList[i].id] = this.dataTypeList[i].name;
                }
                this.dataTypeMap = map;
            });
        },
        loadParamList: function (modelId) {
            this.isLoading = true;
            this.$get("/param/data?modelId=" + modelId,{},(response) => {
                this.paramList = response.data;
            },(response) => {
                this.isLoading = false;
            });
        },
        createParam: function () {
            this.editParam.modelId = this.currentModel.id;
            this.$post("/param/create", this.editParam,(response) => {
                this.$message({
                    message: '创建成功',
                    type: 'success'
                });
                this.paramDlgVisible = false;
                this.loadParamList(this.currentModel.id);
            });
        },

        deleteParam: function (id) {
            this.$confirm('该操作将删除该参数, 是否继续?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$get("/param/delete?id=" + id,{},(response) => {

                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.paramDlgVisible = false;
                    this.loadParamList(this.currentModel.id);
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消操作'
                });
            });
        },

    },

}
</script>
